import React, { useState } from "react";
import styles from "./index.module.scss";
import { Image, Input, Button, Toast } from "antd-mobile";
import { EyeInvisibleOutline, EyeOutline } from "antd-mobile-icons";
import { ApiLogin } from "@/utils/api";
import { useNavigate } from "react-router-dom";
// import { addActionCode, addToken } from "@/store/systemSlice";
import { setToken } from "@/store/userSlice";
import { useAppDispatch } from "@/hooks";

type Props = {};

// 继承原来接口定义新接口
interface IMyResponseData extends IResponseData {
  data: string
}

export default function index({}: Props) {
  const dispatch = useAppDispatch();

  //手机号码
  const [phoneValue, setPhoneValue] = useState("18718988850");

  //   密码
  const [passwordValue, setPasswordValue] = useState("wolfcode123");

  //是否显示密码
  const [visible, setVisible] = useState(false);

  //路由跳转
  const navigate = useNavigate();

  //登录按钮
  const loginBtn = async () => {
    console.log("手机号：", phoneValue, "密码：", passwordValue);

    let res: IMyResponseData;
    // 调用登录接口
    try {
      // try里面的代码（调用栈）发生错误，catch就会接受错误。
      res = await ApiLogin(phoneValue, passwordValue);
    } catch (err: any) {
      // 捕捉 由try代码段抛出的错误，Promise里面的reject、throw new Error()
      // 负责收集错误 报告给后端，统计前端最多出错的地方，以便后续的迭代升级
      // 有错误进行返回
      // 状态恢复
      let res = err.response.data;

      // 有请求到数据，但是后端标记该数据为错误（业务错误）
      if (res.message) {
        Toast.show({
          icon: "fail",
          content: res.message,
        });
        return;
      } else {
        // 服务器的确崩溃（超时机制，500）
        // 有可能请求服务器那边的时候，请求超时了
        Toast.show({
          icon: "fail",
          content: "系统发生错误, 请联系管理!",
        });
        return;
      }
    }

    // 本地缓存
    localStorage.setItem("token", res.data as string);

    // redux仓库
    dispatch(setToken(res.data as string));

    // 跳转到用户中心
    navigate("/user");
  };

  return (
    <div className={styles.qd_login_page}>
      {/* logo图标 */}
      <div className="qd_login_img_area">
        <Image src="./images/logo.png" fit="fill" />
      </div>

      {/* 标题 */}
      <div className="qd_login_title">Login Page</div>

      {/* 登录 */}
      <div className="qd_login_area">
        {/* 手机号码的输入框 */}
        <div className="qd_login_phone">
          <Input
            placeholder="请输入手机号码"
            value={phoneValue}
            onChange={(val) => {
              setPhoneValue(val);
            }}
          />
        </div>

        {/* 密码输入框 */}
        <div className="qd_login_password qd_login_phone">
          <Input
            className={styles.input}
            placeholder="请输入密码"
            value={passwordValue}
            onChange={(val) => {
              setPasswordValue(val);
            }}
            type={visible ? "text" : "password"}
          />
          <div className={styles.eye}>
            {!visible ? (
              <EyeInvisibleOutline onClick={() => setVisible(true)} />
            ) : (
              <EyeOutline onClick={() => setVisible(false)} />
            )}
          </div>
        </div>

        {/* 登录按钮 */}
        <div className="qd_login_btn">
          <Button block color="primary" size="large" onClick={loginBtn}>
            直接登录
          </Button>
        </div>

        {/* 注册 前往首页 */}
        <div className="qd_login_go_area">
          <div className="qd_login_go_register" onClick={() => navigate('/register')}>前往注册</div>
          <div className="qd_login_go_home" onClick={() => navigate("/")}>
            前往首页
          </div>
        </div>

        <div className="qd_login_author">Copyright © 前端小棋 2022</div>
      </div>
    </div>
  );
}
